<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width= , initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--
        · HTML和XHTML的区别
        doctype文档及编码
            HTML比较简单 内部采用的机制不一样
        元素大小写
            HTML允许大写 XHTML不能大写
        属性布尔值
            HTML可以只写属性不用写值默认为真 
        单标签写法
            HTML单标签可以不用写直线
        属性引号
            HTML的属性值可以不用加引号 
        图片的alt属性
            HTML可以不用写alt属性 
        双标签的闭合
            HTML可以不闭合 
    -->
    <!--
        · strong与b、em与i的区别
        表现形态都是一样的，分别是加粗和斜体
        区别在于 strong和em是具备语义化的，而i和b是不具备语义化的
        简化选择器的操作，在复杂的情况下可以使用i，b少写一下class
    -->
    <!--
        · 引用标签
        blockquote：引用大段的段落解释
        q：引用小段的短语解释
        abbr：缩写或首字母缩略词
        address：引用文档地址信息
        cite：引用著作的标题
    -->
    <!--
        · iframe标签
        可以引入其他的HTML到当前的HTML中显示
        srcdoc和src属性都存在的情况下只显示srcdoc属性
        iframe可以做钓鱼网站
        可以进行数据传输、共享代码，局部刷新，第三方介入
    -->
    <!--
        br和wbr标签
        br是单标签表示换行操作，wbr表示软换行操作(可以把整体比较长的单词按照<wbr>分隔开)
    -->
    <!--
        pre与code标签
        针对网页中的程序代码的显示效果(对于尖括号需要进行转义)
        <pre><code></code></pre>
    -->
    <!--
        map和area标签
        给一张图片的某个特殊的区域添加链接，area能添加的热区的形状：矩形rect、圆形circ、多边形poly
    -->
    <!--
        embed与object标签
        都能嵌入一些多媒体，如flash动画和一些插件，区别是为了兼容不同的游览器
        object需要配合一些param   <object><param name="" value=""></object>
    -->
    <!--
        audio和video标签
        分别表示嵌入的是音频和视频文件 控件默认不显示，可以通过controls进行控制 loop是否循环 autoplay是否自动播放
        嵌套source可以写来源，可以写多个，如果第一个游览器支持该音频视频就选第一个，不支持就看第二个，以此类推
    -->
    <!--
        文字注解与文字方向
        ruby 定义ruby注释（中文注音或字符）rt定义字符的解释或发音
        bdo标签可以覆盖默认的文本方向
    -->
    <!--
        link标签
        主要是用来引用外部的链接
        添加网址标题栏前的小图标
        <link rel="icon" type="/image/x-icon" href="http://www.mobiletrain.org/favicon.ico">
        DNS预解析
        <link rel="dns-prefetch" href="//static.360buyimg.com">
    -->
    <!--
        meta标签
        meta辅助信息、http-rquiv="refresh"代表刷新、http-rquiv="expires"表示缓存
    -->
    <!--
        语义化标签
        header 页眉
        footer 页脚
        main 主体
        hgroup 标题组合
        nav 导航

        article 独立的内容
        aside 辅助信息的内容(侧标栏)
        section 区域 (一般article内包含section)
        figure 描述图像或视频
        figcaption 描述图像或视频的标题部分  一般和figure连用<figure><figcaption></figcaption></figure>

        datalist 选项列表 (利用id和input对应在一起)
        details/summary 文档细节/文档标题 open展开状态，默认闭合状态
        progress/meter 定义进度条/定义度量范围
        time 定义日期或时间
        mark 带有记号的文本
    -->
    <!--
        表格扩展
        隐藏空单元 empty-cells:hide
        添加单线 border-collapse:collapse
        斜线分类 border/rotate
        列分组 colgroup/col
    -->
    <!--
        表单扩展
        美化：利用label + input:checked label下的input的display设置为none，div设置自己的美化背景图片
              利用opacity 将input的透明度设置为0
        新的input控件
            email 电子邮件地址输入框
            url   网址输入框
            number 数值输入框
            range  滑动条
            date/month/week 日期控件
            search 搜索框
            color 颜色控件
            tel   电话号码输入框（在移动端会默认调起数字键盘）
            time   时间控件
        新的表单属性
            autocomplete 自动完成 默认开启on 
            autofocus    获取焦点
            required     不能为空
            pattern      正则验证

            method       数据传输方式
            enctype      数据传输类型
            name/value   数据的键值对
        扩展标签
            fieldset     表单内元素分组
            legend       为fieldset元素定义标题
            optgroup     定义选项组
    -->
</body>
    <!--map与area-->
    <img src="img/1.png" alt="" usemap="#star">
    <map name="star">
        <area shape="rect" coords="205 83 275 173" href="../023实战之博文尚美首页/index.html" alt="">
    </map>
    <!--文字注解-->
    <ruby>韩<rt>φ(*￣0￣)</rt></ruby>
</html>